<template>
  <div class="order" id="order">
    <van-tabs
      type="card"
      animated
      color="#5599FF"
      v-model="active"
      @change="tabChange"
    >
      <van-tab v-for="tab in tabs" :title="tab.title" :key="tab.key">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getList"
        >
          <van-cell v-for="item in list" :key="item.id">
            {{ item.orderText }}
            <van-tag :type="tagType[active].type">{{tagType[active].text}}</van-tag>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getListByCustomerAndStatus } from "@/api/order";
export default {
  data() {
    return {
      list: [],
      active: 0,
      loading: false,
      finished: false,
      tabs:[
        {title:"待支付",key:0},
        {title:"待使用",key:1},
        {title:"已完成",key:2}
      ],
      tagType:{
        0:{type:"danger",text:"未支付"},
        1:{type:"success",text:"已支付"},
        2:{type:"primary",text:"已完成"}
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      await getListByCustomerAndStatus(this.active).then((response) => {
        if (response.code === "200") {
          this.list = response.data;
          this.finished = true;
        }
      });
    },
    tabChange() {
      this.getList();
    },
  },
};
</script>

<style scoped lang="less">
.order {
  ul {
    margin-top: 24px;
    li {
      width: 100%;
      height: 2rem;
      line-height: 2rem;
      padding-left: 2rem;
      font-size: 0.9rem;
      border-bottom: 1px solid #eee;
    }
  }
  /deep/ .van-tab__text van-tab__text--ellipsis {
    border: 1px solid #ccc;
  }
}
</style>